@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">绑定银行卡</div>
                <div class="panel-body">
                    <form class="form-horizontal" role="form" method="POST" action="{{ url('/withdrawals/cashing/storebank') }}">
                        {!! csrf_field() !!}

                        <div class="form-group{{ $errors->has('real_name') ? ' has-error' : '' }}">
                            <label class="col-md-4 control-label">开户姓名</label>

                            <div class="col-md-6">
                                <input type="text" class="form-control" name="real_name" value="{{ old('real_name') }}" >
                                @if ($errors->has('real_name'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('real_name') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>
						<div class="form-group{{ $errors->has('bank_name') ? ' has-error' : '' }}">
                            <label class="col-md-4 control-label">选择银行</label>

                            <div class="col-md-6">
                                <input id="bankval" type="text" class="form-control" name="bank_name" value="" data-toggle="modal" data-target="#myModal">
                                @if ($errors->has('bank_name'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('bank_name') }}</strong>
                                    </span>
                                @endif
                            </div>
                            
                            <!-- Modal -->
							<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
							  <div class="modal-dialog">
							    <div class="modal-content">
							      <div class="modal-header">
							        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
							        <h4 class="modal-title" id="myModalLabel">银行列表</h4>
							      </div>
							      <div class="modal-body">
							        <ul class="list-group" id="bank">
									  <li class="list-group-item">农业银行</li>
									  <li class="list-group-item">建设银行</li>
									  <li class="list-group-item">工商银行</li>
									  <li class="list-group-item">民生银行</li>
									  <li class="list-group-item">中国银行</li>
									</ul>
							      </div>
							      <div class="modal-footer">
							        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
							      </div>
							    </div>
							  </div>
							</div>
                        </div>
                        <div class="form-group{{ $errors->has('address') ? ' has-error' : '' }}">
                            <label class="col-md-4 control-label">开户地址</label>

                            <div class="col-md-6">
								<input type="text" id="options" class="form-control" name="address" id="address" placeholder="选择你的地区" data-toggle="dropdown" readonly="" value="">
                            	@if ($errors->has('address'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('address') }}</strong>
                                    </span>
                                @endif
                                <!-- Modal -->
								<div class="modal fade" id="cityModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
								  <div class="modal-dialog">
								    <div class="modal-content">
								      <div class="modal-header">
								        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
								        <ul class="city-ul" role="tablist" id="cityul">
						                    <li role="presentation" class="active"><a href="#province" data-next="city" role="tab" data-toggle="tab">省份</a></li>
						                    <li role="presentation"><a href="#city" data-next="district" role="tab" data-toggle="tab">城市</a></li>
						                    <li role="presentation"><a href="#district" data-next="street" role="tab" data-toggle="tab">县区</a></li>
						                </ul>
								      </div>
								      <div class="modal-body">
								        <div class="tab-content" style="padding-top: 0;">
						                    <div role="tabpanel" class="tab-pane active" id="province">
						                    	<a href="javascript:;" class="areas-item" data-id="110000" data-type="undefined">北京</a>
						                    	<a href="javascript:;" class="areas-item" data-id="440103" data-type="undefined">荔湾区</a>
						                    	<a href="javascript:;" class="areas-item current" data-id="440100" data-type="undefined">广州市</a>
						                    </div>
						                    <div role="tabpanel" class="tab-pane" id="city">--</div>
						                    <div role="tabpanel" class="tab-pane" id="district">--</div>
						                </div>
								      </div>
								      <div class="modal-footer">
								        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
								      </div>
								    </div>
								  </div>
								</div>
                            </div>
                        </div>
                        <div class="form-group{{ $errors->has('accounts_bank') ? ' has-error' : '' }}">
                            <label class="col-md-4 control-label">开户行</label>

                            <div class="col-md-6">
                                <input type="text" class="form-control" name="accounts_bank" value="{{ old('accounts_bank') }}" >
                                @if ($errors->has('accounts_bank'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('accounts_bank') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>
                        <div class="form-group{{ $errors->has('card_number') ? ' has-error' : '' }}">
                            <label class="col-md-4 control-label">银行卡号</label>

                            <div class="col-md-6">
                                <input type="text" class="form-control" name="card_number" value="{{ old('card_number') }}" >
                                @if ($errors->has('card_number'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('card_number') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-4">
                                <div class="checkbox">
                                    <label>
                                        <i class="fa glyphicon glyphicon-hand-right public-marginright10"></i>为了您的资金安全,此账号为您唯一的提现账号,请务必仔细核对以上信息。
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-4">
                                <button type="submit" class="btn btn-primary btn-lg btn-block">
                                    <i class="fa glyphicon glyphicon-send public-marginright10"></i>确认信息
                                </button>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-4">
                                <a href="{{ url('/withdrawals/banklist') }}" class="btn btn-default btn-lg btn-block">
                                    <i class="fa glyphicon glyphicon-th public-marginright10"></i>返回选择
                                </a>
                            </div>
                        </div>
                    </form>
                    <script src="{{ asset('javascript/bank.js') }}"></script>
                    <script src="{{ asset('javascript/city.js') }}"></script>
					<script type="text/javascript">
						window.onload=function(){
							//银行卡
							$('#bank').html('')
							var kpo='';
							$.map(b_data, function(val,i) {
								kpo+="<li class='list-group-item'>"+val+"</li>";
							});
							$('#bank').html(kpo);
							$('#bank').delegate('li','click',function(){
								$('#bankval').val($(this).html());
								$('#myModal').modal('hide');
							})
                            $('#bankval').val(b_data[0]);
							//城市
							var cityarray=["四川省","成都市","武侯区"];
							$('#options').val(cityarray[0]+' '+cityarray[1]+' '+cityarray[2]);
							$('#options').click(function(){
								$('#cityModal').modal('show');
								addcity(0);
								addcity(1);
								addcity(2);
							})
							$('#cityul').delegate('li','click',function(){
								var index=$(this).index();
								if(index==0){
									addcity(index);
								}else if(index==1){
									addcity(index);
								}else if(index==2){
									addcity(index);
								}
							});
							$('#province').delegate('a','click',function(){
								cityarray[0]=$(this).html();
								addcity(1);
								$('#cityul li:eq(1) a').tab('show');
							})
							$('#city').delegate('a','click',function(){
								cityarray[1]=$(this).html();
								addcity(2);
								$('#cityul li:eq(2) a').tab('show');
							})
							$('#district').delegate('a','click',function(){
								cityarray[2]=$(this).html();
								$('#cityul li:eq(0) a').tab('show');
								$('#cityModal').modal('hide');
								$('#options').val(cityarray[0]+' '+cityarray[1]+' '+cityarray[2]);
							})
							function addcity(p){
								if(p==0){
									var kop='';
									$.map(s_data['p'], function(val,i) {
//										kop+="<a class='areas-item'>"+val+"</a>";
										kop+="<a href='javascript:;' class='areas-item' data-id='110000' data-type='undefined'>"+val+"</a>";
									});
									$('#province').html(kop);
								}else if(p==1){
									var kox='';
									$.map(s_data['c'][cityarray[0]], function(val,i) {
//										kop+="<a class='areas-item'>"+val+"</a>";
										kox+="<a href='javascript:;' class='areas-item' data-id='110000' data-type='undefined'>"+val+"</a>";
									});
									$('#city').html(kox);
								}else if(p==2){
									var kos='';
									$.map(s_data['a'][cityarray[0]+'-'+cityarray[1]], function(val,i) {
//										kop+="<a class='areas-item'>"+val+"</a>";
										kos+="<a href='javascript:;' class='areas-item' data-id='110000' data-type='undefined'>"+val+"</a>";
									});
									$('#district').html(kos);
								}
							}
						}
					</script>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
